<!doctype html>
<%@page import="com.macrosolution.exdebito.Role"%>
<html>
	<head>
		
		<meta name="layout" content="kickstart"/>
		<title><g:message code="site.welcome.title.label"/></title>
		
	
		
	</head>
<body>
<!-- RIBBON Macro Categori-->
			<div id="ribbon">
	
				<!-- breadcrumb -->
				<ol class="breadcrumb">
					<li>Credenziali</li><li>Ruoli</li><li>Lista</li>
				</ol>
				<!-- end breadcrumb -->

				<!-- You can also add more buttons to the
				ribbon for further usability

				Example below:

				<span class="ribbon-button-alignment pull-right">
				<span id="search" class="btn btn-ribbon hidden-xs" data-title="search"><i class="fa-grid"></i> Change Grid</span>
				<span id="add" class="btn btn-ribbon hidden-xs" data-title="add"><i class="fa-plus"></i> Add</span>
				<span id="search" class="btn btn-ribbon" data-title="search"><i class="fa-search"></i> <span class="hidden-mobile">Search</span></span>
				</span> -->

			</div>
			<!-- END RIBBON -->
			
			<!-- MAIN CONTENT -->
			<div id="content">
			<div class="row">
				<div class="col-lg-6">
					<div class="tree smart-form" id="tree_roles">
						
					</div>				
				</div>
				<div class="col-lg-5 col-md-offset-1" id="add_role_section">
					<g:hasErrors bean="${role}">
						<div class="alert alert-danger fade in">
							<g:renderErrors bean="${role}" as="list" />
						</div>
					</g:hasErrors>
					<g:if test="${flash.message}">
					<div class="message" role="status">
						<g:message code="${flash.message}" />
					</div>
					</g:if>
					<button type="button" class="btn btn-primary btn-lg" id="add_role" onclick="addRole();">
						<i class="fa fa-plus-circle"></i>&nbsp;Aggiungi Ruolo
					</button>			
				</div>
				</div>
			</div>

<script type="text/javascript">
		
		// DO NOT REMOVE : GLOBAL FUNCTIONS!
		var priority=0;
		$(document).ready(function() {
			
			pageSetUp();

			buildRolesTree();
			
	
		});
		function addRole(){
			 ${remoteFunction(asynchronous: true,
    				action:'get_add_role',
						controller:'role',
						update:'add_role_section'
						)} 
			}

		function editRole(id_role){
			 ${remoteFunction(asynchronous: true,
   						action:'get_update_role',
						controller:'role',
						params:'\'id=\'+id_role',
						update:'add_role_section'
						)} 
			}
	function buildInnerTree(data,textStatus){
				var result='';
				var obj = data[0];
			    if(priority<obj.priority){
			    	priority=obj.priority;
				 	result+='<ul><li><span ><i class="fa fa-lg fa-user"></i>'+obj.label+' ('+obj.priority+')&nbsp<button type="button" class="btn btn-primary btn-sm" id="add_role" onclick="editRole('+obj.id+');"><i class="fa fa-lg fa-edit"></i></button></span>';
				 	if(data[1] && obj.priority<data[1].priority){
				 		data.splice(0, 1);
				 		result+=buildInnerTree(data,textStatus)+'</li></ul>';
					 	}else if(data[(1)] && obj.priority==data[(1)].priority){
					 		data.splice(0, 1);
					 		result+='</li>'+buildInnerTree(data,textStatus)+'</ul>';	
						 	}else if(!data[(1)]){
						 		result+='</li></ul>';
							 	}    
				 }else if(priority==obj.priority){
					 if(data[1] && obj.priority<data[1].priority){
						 data.splice(0, 1);
						 result+='<li><span ><i class="fa fa-lg fa-user"></i>'+obj.label+' ('+obj.priority+')&nbsp<button type="button" class="btn btn-primary btn-sm" id="add_role" onclick="editRole('+obj.id+');"><i class="fa fa-lg fa-edit"></i></button></span></li></ul>'+buildInnerTree(data,textStatus);	 
					 }
					 if(data[1] && obj.priority==data[1].priority){
						 data.splice(0, 1);
						 result+='<li><span ><i class="fa fa-lg fa-user"></i>'+obj.label+' ('+obj.priority+')&nbsp<button type="button" class="btn btn-primary btn-sm" id="add_role" onclick="editRole('+obj.id+');"><i class="fa fa-lg fa-edit"></i></button></span></li>'+buildInnerTree(data,textStatus);	 
					 }
					  

				 }
			

			return result;
		}	
	function buildTree(data,textStatus){
		var result=buildInnerTree(data,textStatus);
		$('#tree_roles').html(result); 
		$('.tree > ul').attr('role', 'tree').find('ul').attr('role', 'group');
		$('.tree').find('li:has(ul)').addClass('parent_li').attr('role', 'treeitem').find(' > span').attr('title', 'Collapse this branch').on('click', function(e) {
			var children = $(this).parent('li.parent_li').find(' > ul > li');
			if (children.is(':visible')) {
				children.hide('fast');
				$(this).attr('title', 'Expand this branch').find(' > i').removeClass().addClass('fa fa-lg fa-plus-circle');
			} else {
				children.show('fast');
				$(this).attr('title', 'Collapse this branch').find(' > i').removeClass().addClass('fa fa-lg fa-minus-circle');
			}
			e.stopPropagation();
		});		
		}
	function buildRolesTree(){
		 ${remoteFunction(asynchronous: true,
 					action:'get_roles',
					controller:'role',
					onSuccess:'buildTree(data,textStatus);'
					)} 
				
		}	

		</script>			
</body>

</HTML>			
